import  React ,{Component}from 'react'
import PropTypes from 'prop-types';
import './textInput.scss'
class TextInput  extends  Component{
    constructor(props){
        super(props)
        this.state={
            text:''
        }
      this._onChange=this._onChange.bind(this)
   }
   static propTypes={
    placeholder:PropTypes.string,
    label:PropTypes.string,
    disabled:PropTypes.bool,
    iconClass:PropTypes.string,
    inputType:PropTypes.string
   }
   static defaultProps = {
     placeholder:'请输入',
     label:'',
     disabled:false,
     inputType:'text'
   }
   componentDidMount(){
      
       this.setState({
         text:this.props.initValue
       })
   }
   _onChange(e){
     let inputName=this.props.inputName;
      let  text=e.target.value;
      this.setState({text});
      this.props.changeText({text,inputName:inputName+""})
    }
   render(){
       let {label,placeholder,disabled,iconClass,inputType} =this.props
        return (
            <div className="input-text">
                <label className="label">{label}</label>
                <input  
                 value={this.state.text==""?this.props.initValue:this.state.text}
                 onChange={this._onChange}
                 type={inputType} 
                 className="input"
                 disabled={disabled}
                 placeholder={placeholder}/>
                {iconClass&&iconClass!=""?<a href="javascript:;" onClick={this.props.btnAction} className={["input-icon",iconClass].join("  ")}></a>:null}
            </div>
        )
    }
}
export default TextInput